<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS3翻书效果</title>
    <style>
      /* 清除浏览器默认样式 */
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      body {
        font-family: "Microsoft Yahei";
        background-color: #212121;
        /* 设置视距 */
        perspective: 1000px;
      }
      /* 设置圆点位置，默认居中 */
      .preserve-3d {
        transform-origin: 0;
        transform-style: preserve-3d;
      }
      .book {
        width: 300px;
        height: 300px;
        /* 水平垂直居中(前提设置了宽高) */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: #fff;
        transform: rotateX(30deg);
      }
      .boox-page-box {
        /* 元素叠加在一起 */
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        border: 1px solid rgb(25, 118, 210);
        background-color: #fff;
      }
      /* 设置文字样式 */
      .boox-page-box .tit {
        font-size: 30px;
        margin-top: 100px;
        color: rgb(25, 118, 210);
      }
      .boox-page-box.book-page-1 {
        background-color: rgb(25, 118, 210);
      }
      .boox-page-box.book-page-1 .tit {
        color: #fff;
      }
      .flip-animation-1 {
        animation: flipBook1 17s;
      }
      .flip-animation-2 {
        animation: flipBook2 13s 2s;
      }
      .flip-animation-3 {
        animation: flipBook3 10s 3s;
      }
      /* 动画 */
      @keyframes flipBook1 {
        50% {
          transform: rotateY(-160deg);
        }
        100% {
          transform: rotateY(0deg);
        }
      }
      @keyframes flipBook2 {
        50% {
          transform: rotateY(-150deg);
        }
        100% {
          transform: rotateY(0deg);
        }
      }
      @keyframes flipBook3 {
        50% {
          transform: rotateY(-140deg);
        }
        100% {
          transform: rotateY(0deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="book preserve-3d">
      <div class="boox-page-box book-page-4 preserve-3d flip-animation-4">
        <p class="tit">第三页</p>
      </div>
      <div class="boox-page-box book-page-3 preserve-3d flip-animation-3">
        <p class="tit">第二页</p>
      </div>
      <div class="boox-page-box book-page-2 preserve-3d flip-animation-2">
        <p class="tit">第一页</p>
      </div>
      <div class="boox-page-box book-page-1 preserve-3d flip-animation-1">
        <p class="tit">翻页特效<br />flip-book</p>
      </div>
    </div>
  </body>
</html>
